$(function () {
    // 需求1：点击a连接，显示和隐藏盒子;
    $("#loginBox a").on('click', function () {
        // 第一个a连接被点击了，隐藏第一个显示第二个;
        $("#loginBox").hide();
        $("#regBox").show();
    });
    $("#regBox a").on('click', function () {
        // 点击第二个a连接，显示第一个隐藏第二个;
        $("#loginBox").show();
        $("#regBox").hide();
    });

    // 需求2：定义校验规则;
    // console.log(layui); // 导入 layui.all.js 就会出现一个变量 layui
    let form = layui.form; // 把layui里面的form属性，导出直接用变量接收;
    // 定义校验规则，使用的是 form.verify() , 他的参数是 对象；
    //    参数是对象，属性是校验名称，值是校验规则，值有两种类型：函数和数组！
    form.verify({
        // 属性是校验名称，值是校验规则，
        // 值有两种类型：函数和数组！
        username: [
            /^[a-zA-Z0-9]{1,10}$/,
            '用户名必须1到10位数字和字母'
        ],
        pwd: [
            /^[a-zA-Z0-9]{6,12}$/,
            '密码必须6到12位数字和字母'
        ],
        // 确认密码的校验规则
        rePwd: function (value) {
            // 判断面的值和确认密码的值是否相同
            // 获取确认密码的值
            let pwd = $('#regBox input[name=password]').val();
            // console.log(value); // 确认密码的值
            // 判断的是出错的情况
            if (pwd !== value) {
                return '两次密码输入不一致！';
            }
        }
    });
   
    // 需求3: 注册功能;
    let layer = layui.layer;
    $("#formReg").on('submit', function (e) {
        // 阻止表单的提交
        e.preventDefault();
        // 使用 axios 中的ajax提交
        axios({
            method: 'POST',
            url: '/api/reguser',
            // jQuery中的ajax，参数 string  object  array, content-type头信息固定：application/x-www-form-encoded
            // axios中的ajax，参数根据类型不同头信息也不同;
            //      data参数是字符串类型：a=1&b=2&c=3       content-type头信息固定：application/x-www-form-encoded 
            //      data参数是对象类型：{ a:1, b:2, c:3 }   content-type头信息固定：application/json
            //      data参数是FormData对象                 content-type头信息固定：multipart/form-data
            data: $("#formReg").serialize(),
        }).then(function (res) {
            // // res中有六个属性，我们打印data属性;
            // console.log(res.data);
            if (res.data.status !== 0) {
                return layer.msg(res.data.message, {icon: 5}); 
            }
            // 成功后提示
            layer.msg("恭喜您，用户注册成功！", {icon: 6}); 
            // 切换到登录框
            $("#regBox a").click();
            // 清空表单 - DOM对象中有一个方法 reset() 可以充值表单
            $("#formReg")[0].reset();
        })
    });

    // 需求4: 登录功能;
    $("#formLogin").on('submit', function (e) {
        // 阻止表单默认提交
        e.preventDefault();
        // 发送ajax
        axios({
            method: 'POST',
            url: '/api/login',
            // axios中data参数类型，可以控制 content-type 属性的值
            data: $(this).serialize()  // a=1&b=2&c=3
        }).then(function (res) {
            // console.log(res.data);
            // 判断
            if (res.data.status !== 0) {
                return layer.msg(res.data.message, {icon: 5}); 
            }
            // 成功提示
            layer.msg('恭喜您，登录成功！', {icon: 6}); 
            // 页面跳转
            location.href = '/index.html';
            // 保存token，后面用于身份认证
            localStorage.setItem('token', res.data.token);
        })
    })
});